<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>转诊数据统计</title>
    <link rel="stylesheet" href="../../plugins/layui/css/layui.css"/>
    <link rel="stylesheet" href="../../css/fa.css"/>
    <link rel="stylesheet" href="../../css/icon.css"/>
    <link rel="stylesheet" href="../../css/ares_animate.min.css"/>
    <link rel="stylesheet" href="../../css/ares_hover_variant.min.css"/>
    <link rel="stylesheet" href="../../css/ares_reboot.css"/>
    <link rel="stylesheet" href="../../css/app.min.css"/>
    <link rel="stylesheet" href="../../css/iframe.css"/>
    <style>
        .stat-total {
            height: 80px;
            line-height: 60px;
            padding: 10px 15px;
        }

        .stat-level {
            height: 60px;
            line-height: 40px;
            padding: 10px 15px;
            border-left-width: 5px !important;
        }
    </style>
</head>

<body>
<form class="layui-form" lay-filter="stat-form">
    <div class="layui-form-item ares-clearfix">
        <div class="layui-inline ares-float-right">
            <label class="layui-form-label">时间范围</label>
            <div class="layui-input-inline">
                <input class="layui-input ares-w-auto" readonly id="stat-date" placeholder=" - ">
            </div>
        </div>
    </div>
</form>
<div class="ares-mb-lg">
    <div id="in-patient-stat-total" class="ares-row"></div>
    <div id="in-patient-stat-level" class="ares-row"></div>
</div>
<div>
    <div id="out-patient-stat-total" class="ares-row"></div>
    <div id="out-patient-stat-level" class="ares-row"></div>
</div>


<script type="text/javascript" src="../../plugins/layui/layui.js"></script>
<script type="text/javascript" src="../../aresExtends/config/layuiConfig.js"></script>
<script>
    layui.use(['form', 'table', 'laydate', 'mandyServices', 'dayjs'], function (form, table, laydate, mandyServices, dayjs) {
        var defaultStartTime = +new Date().setMonth(new Date().getMonth() - 1),
            defaultEndTime = +new Date(),
            $inPatientStatTotal = $('#in-patient-stat-total'),
            $inPatientStatLevelWrap = $('#in-patient-stat-level'),
            $outPatientStatTotal = $('#out-patient-stat-total'),
            $outPatientStatLevelWrap = $('#out-patient-stat-level');

        laydate.render({
            elem: '#stat-date',
            btns: ['confirm'],
            range: true,
            value: dayjs(defaultStartTime).format('YYYY-MM-DD') + ' - ' + dayjs(defaultEndTime).format('YYYY-MM-DD'),
            done: function (value, date, endDate) {
                var range = value.split(' - ');
                getStatData(dayjs(range[0]).valueOf(), dayjs(range[1]).valueOf());
            }
        });
        getStatData(defaultStartTime, defaultEndTime);

        /**
         * @author: ares
         * @date: 2021/4/21 9:51
         * @description: 获取统计信息
         * @param{number} startTime
         * @param{number} endTime
         */
        function getStatData(startTime, endTime) {
            $inPatientStatTotal.empty();
            $inPatientStatLevelWrap.empty();
            $outPatientStatTotal.empty();
            $outPatientStatLevelWrap.empty();
            mandyServices.mandy_get_hospital_referral_stat(startTime, endTime).then(function (res) {
                var data = res.data,
                    dataMap = data.map,
                    mapIn = dataMap.in_referral,
                    mapOut = dataMap.out_referral,
                    inStatMap = {
                        totalName: '转入患者总数(人)',
                        total: dataMap.in_count || 0,
                        level: [
                            {name: '三级医院', level: 3, value: 0},
                            {name: '二级医院', level: 2, value: 0},
                            {name: '一级医院', level: 1, value: 0},
                        ]
                    },
                    outStatMap = {
                        totalName: '转出患者总数(人)',
                        total: dataMap.out_count || 0,
                        level: [
                            {name: '三级医院', level: 3, value: 0},
                            {name: '二级医院', level: 2, value: 0},
                            {name: '一级医院', level: 1, value: 0},
                            {name: '家庭康复', value: dataMap.family || 0},
                        ]
                    };
                $.each(mapIn, function (idx, inList) {
                    if (inList.level == 3) inStatMap.level[0].value = inList.num || 0;
                    if (inList.level == 2) inStatMap.level[1].value = inList.num || 0;
                    if (inList.level == 1) inStatMap.level[2].value = inList.num || 0;
                })
                $.each(mapOut, function (idx, outList) {
                    if (outList.level == 3) outStatMap.level[0].value = outList.num || 0;
                    if (outList.level == 2) outStatMap.level[1].value = outList.num || 0;
                    if (outList.level == 1) outStatMap.level[2].value = outList.num || 0;
                })
                $inPatientStatTotal.append('<div class="ares-col-sm-6 ares-col-md-4 ares-col-lg-3">' +
                    '<div class="stat-total ares-bg-cyan ares-text-white ares-rounded">' +
                    '<span class="ares-text-md">' + inStatMap.totalName + '</span>' +
                    '<b class="ares-text-xl ares-float-right">' + inStatMap.total + '</b>' +
                    '</div>' +
                    '</div>');
                $outPatientStatTotal.append('<div class="ares-col-sm-6 ares-col-md-4 ares-col-lg-3">' +
                    '<div class="stat-total ares-bg-teal ares-text-white ares-rounded">' +
                    '<span class="ares-text-md">' + outStatMap.totalName + '</span>' +
                    '<b class="ares-text-xl ares-float-right">' + outStatMap.total + '</b>' +
                    '</div>' +
                    '</div>');
                $.each(inStatMap.level, function (idx, level) {
                    $inPatientStatLevelWrap.append('<div class="ares-col-sm-6 ares-col-md-4 ares-col-lg-3">' +
                        '<div class="stat-level ares-border ares-border-cyan ares-rounded-sm">' +
                        '<span>' + level.name + '</span>' +
                        '<b class="ares-text-md ares-float-right">' + level.value + '</b>' +
                        '</div>' +
                        '</div>');
                })
                $.each(outStatMap.level, function (idx, level) {
                    $outPatientStatLevelWrap.append('<div class="ares-col-sm-6 ares-col-md-4 ares-col-lg-3">' +
                        '<div class="stat-level ares-border ares-border-teal ares-rounded-sm">' +
                        '<span>' + level.name + '</span>' +
                        '<b class="ares-text-md ares-float-right">' + level.value + '</b>' +
                        '</div>' +
                        '</div>');
                })
            });
        }

    })
</script>
</body>
</html>